<!--首页-->
<template>
    <scroller
    >
        <div class="m-search">
            <div class="layout-1">
                <img src="../../images/img@2x.png" alt="">
            </div>
            <div class="layout-2">
                <div class="item-1" @click="toSearch">
                    <i class="icon-kf_homepage_search"></i><input type="text" :placeholder="placeholder">
                </div>
            </div>
        </div>
        <div class="m-links flex-row">
            <div class="item flex-item">
                <router-link :to="{ name: 'IssueList', params: { listId: 1 }, query: {title:'账户问题'}}">
                    <i class="icon-kf_account"></i>
                    <span>账户问题</span>
                </router-link>
            </div>
            <div class="item flex-item">
                <router-link :to="{ name: 'IssueList', params: { listId: 2 }, query: {title:'交易问题'}}">
                    <i class="icon-kf_transaction"></i>
                    <span>交易问题</span>
                </router-link>
            </div>
            <div class="item flex-item">
                <router-link :to="{ name: 'IssueList', params: { listId: 3 }, query: {title:'存取款问题'}}">
                    <i class="icon-kf_Access_money"></i>
                    <span>存取款问题</span>
                </router-link>
            </div>
            <div class="item flex-item">
                <router-link :to="{ name: 'IssueList', params: { listId: 4 }, query: {title:'直播间问题'}}">
                    <i class="icon-kf_live"></i>
                    <span>直播间问题</span>
                </router-link>
            </div>
        </div>
        <div class="m-issues">
            <div class="layout-1">常见问题</div>
            <issuess :isHomepage= true :issuess="issuseList"></issuess>
        </div>
    </scroller>
</template>

<script>
    import axios from "axios";
    import cgi from "@/common/cgi";
    import issuess from "@/components/issuess.vue";
    export default {
        name: 'HomeIndex',
        components: {issuess},
        data() {
            return {
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationClickable: true
                },
                placeholder: '如果忘记账户密码怎么办',
                issuseList:[],
            };
        },
        methods: {
            toSearch() {
                this.$router.push({name: 'Search', query: {placeholder: this.placeholder}})
            },
        },
        created() {
            for(var i=0; i<10; i++) {
                this.issuseList.push(i);
            }
            axios.post(cgi.indexList, {})
                .then(res => {
                    if (res.code == 0) {
                        console.log(res.data);
                    } else {
                        console.log("请求数据失败!");
                    }
                }, error => {
                    console.log(error.msg);
                });
           /* $dialog.alert({
                content: 'Hello!',
                okTheme: 'positive',
                effect: 'default'
            }).then(() => {

            })
            $dialog.confirm({
                content: '在"微信"中打开链接吗?',
                okText: '打开'
            }).then((res) => {
                console.log('confirm result: ', res)
            })
            $dialog.alert({
                content: 'Hello!',
                okTheme: 'positive',
                effect: 'default'
            }).then(() => {

            })

            $dialog.confirm({
                content: '在"微信"中打开链接吗?',
                okText: '打开'
            }).then((res) => {
                console.log('confirm result: ', res)
            })

            $toast.show('请求数据失败', 800000)
                .then(function () {

                })
            $loading.show('222222');
            setTimeout(function () {
                $loading.hide()
            }, 5000)*/
        },
    };
</script>

<style lang="scss" type="text/scss">
    @import "./../../scss/mixin";
    @import "./../../scss/variables";

    .m-search {
        position: relative;
        .layout-1 {
            width: 100%;
            height: px2rem(360);
            img {
                width: 100%;
                height: 100%;
            }
        }
        .layout-2 {
            position: absolute;
            top: px2rem(19);
            width: 100%;
            text-align: center;
            .item-1 {
                display: inline-block;
                position: relative;
                border-radius: px2rem(200);
                overflow: hidden;
                height: px2rem(60);
                width: px2rem(600);
                background-color: $bg-colorE;
                padding: 0 px2rem(60);
                i {
                    position: relative;
                    top: px2rem(4);
                    display: inline-block;
                    width: px2rem(80);
                    font-size: px2rem(56);
                }
            }
            input {
                position: relative;
                top: px2rem(-10);
                border: none;
                outline: medium;
                background-color: transparent;
                width: px2rem(380);
                height: 100%;
                font-size: px2rem(30);
                color: $f-colorB;
            }
        }
    }

    .m-links {
        padding: px2rem(36) 0 px2rem(30) 0;
        .item {
            text-align: center;
            &:active {
                background-color: $bg-colorE;
            }
        }
        i {
            font-size: px2rem(56);
        }
        a {
            display: inline-block;
            font-size: px2rem(24);
            color: $f-colorC;
            span {
                display: block;
                margin-top: px2rem(15);
                line-height: px2rem(36);
            }
        }
    }

    .m-issues {
        border-top: solid px2rem(18) $bg-colorA;
        padding-left: px2rem(32);
        .layout-1 {
            font-size: px2rem(32);
            color: $f-colorA;
            font-weight: 500;
            padding: px2rem(40) 0 px2rem(8) 0;
        }
    }
</style>

